<template>
  <div class="container">
    <!-- 页面标题和搜索 -->
    <div class="page-header">
      <h1 class="page-title">项目广场</h1>
      <div class="search-box">
        <input type="text" placeholder="搜索项目..." class="search-input">
        <button class="btn btn-primary">搜索</button>
      </div>
    </div>

    <!-- 筛选器 -->
    <div class="filter-section card">
      <div class="filter-group">
        <h3 class="filter-title">项目类型</h3>
        <div class="filter-tags">
          <span v-for="type in projectTypes" :key="type" class="tag" :class="{ active: selectedType === type }"
            @click="selectedType = type">
            {{ type }}
          </span>
        </div>
      </div>
      <div class="filter-group">
        <h3 class="filter-title">技术栈</h3>
        <div class="filter-tags">
          <span v-for="stack in techStacks" :key="stack" class="tag" :class="{ active: selectedStack === stack }"
            @click="selectedStack = stack">
            {{ stack }}
          </span>
        </div>
      </div>
      <div class="filter-group">
        <h3 class="filter-title">排序</h3>
        <div class="filter-tags">
          <span v-for="sort in sortOptions" :key="sort.value" class="tag" :class="{ active: selectedSort === sort.value }"
            @click="selectedSort = sort.value">
            {{ sort.label }}
          </span>
        </div>
      </div>
    </div>

    <!-- 项目列表 -->
    <div class="projects-grid">
      <div v-for="project in filteredProjects" :key="project.id" class="project-card card">
        <div class="project-header">
          <h3 class="project-title">{{ project.title }}</h3>
          <div class="project-stats">
            <span class="star-count">⭐️ {{ project.stars }}</span>
            <span class="fork-count">🔀 {{ project.forks }}</span>
          </div>
        </div>
        <p class="project-desc">{{ project.description }}</p>
        <div class="project-techs">
          <span v-for="tech in project.techs" :key="tech" class="tag">{{ tech }}</span>
        </div>
        <div class="project-footer">
          <div class="project-meta">
            <span class="author">by @{{ project.author }}</span>
            <span class="date">更新于 {{ project.updatedAt }}</span>
          </div>
          <div class="project-actions">
            <button class="btn btn-primary">查看详情</button>
            <button class="btn btn-secondary">演示</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 分页 -->
    <div class="pagination">
      <button class="btn btn-secondary" :disabled="currentPage === 1" @click="currentPage--">上一页</button>
      <span class="page-info">第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
      <button class="btn btn-secondary" :disabled="currentPage === totalPages" @click="currentPage++">下一页</button>
    </div>
  </div>
</template>

<script setup>
const selectedType = ref('')
const selectedStack = ref('')
const selectedSort = ref('stars')
const currentPage = ref(1)
const totalPages = ref(5)

const projectTypes = ['全部', 'Web应用', '移动应用', '桌面应用', '工具库', '框架', 'UI组件']
const techStacks = ['全部', 'Vue', 'React', 'Node.js', 'Go', 'Java', 'Python']
const sortOptions = [
  { label: '最多收藏', value: 'stars' },
  { label: '最新发布', value: 'latest' },
  { label: '最多贡献', value: 'contributors' }
]

const projects = [
  {
    id: 1,
    title: 'Vue3 Admin Template',
    description: '基于Vue3 + TypeScript + Vite的现代化后台管理系统模板，包含完整的权限管理、主题定制等功能。',
    type: 'Web应用',
    techs: ['Vue3', 'TypeScript', 'Vite', 'Pinia'],
    author: 'jakechen',
    stars: 1234,
    forks: 256,
    updatedAt: '2025-04-20'
  },
  {
    id: 2,
    title: 'Go Microservices Starter',
    description: '使用Go语言构建的微服务脚手架，包含服务注册、配置中心、链路追踪等核心功能。',
    type: '框架',
    techs: ['Go', 'gRPC', 'Docker', 'Kubernetes'],
    author: 'denglee',
    stars: 856,
    forks: 189,
    updatedAt: '2025-04-18'
  },
  {
    id: 3,
    title: 'React Native UI Kit',
    description: '一套完整的React Native UI组件库，包含60+个精心设计的组件，支持主题定制。',
    type: 'UI组件',
    techs: ['React Native', 'TypeScript', 'Styled Components'],
    author: 'linzh',
    stars: 2345,
    forks: 432,
    updatedAt: '2025-04-15'
  }
]

const filteredProjects = computed(() => {
  return projects.filter(project => {
    const typeMatch = !selectedType.value || selectedType.value === '全部' || project.type === selectedType.value
    const stackMatch = !selectedStack.value || selectedStack.value === '全部' || project.techs.includes(selectedStack.value)
    return typeMatch && stackMatch
  }).sort((a, b) => {
    if (selectedSort.value === 'stars') return b.stars - a.stars
    if (selectedSort.value === 'latest') return new Date(b.updatedAt) - new Date(a.updatedAt)
    return b.forks - a.forks
  })
})
</script>

<style scoped>
.page-header {
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-title {
  font-size: 28px;
  font-weight: bold;
}

.search-box {
  display: flex;
  gap: 8px;
}

.search-input {
  width: 300px;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
}

.project-card {
  display: flex;
  flex-direction: column;
}

.project-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.project-title {
  font-size: 18px;
  font-weight: bold;
}

.project-stats {
  display: flex;
  gap: 8px;
  font-size: 14px;
  color: var(--text-secondary);
}

.project-desc {
  color: var(--text-secondary);
  margin-bottom: 16px;
  flex: 1;
}

.project-techs {
  margin-bottom: 16px;
}

.project-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.project-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.author {
  color: var(--primary-color);
  font-size: 14px;
}

.date {
  color: var(--text-secondary);
  font-size: 12px;
}

.project-actions {
  display: flex;
  gap: 8px;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
}

.page-info {
  color: var(--text-secondary);
}

.tag.active {
  background-color: var(--primary-color);
  color: white;
}

@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }

  .search-box {
    width: 100%;
  }

  .search-input {
    width: 100%;
  }

  .projects-grid {
    grid-template-columns: 1fr;
  }

  .project-footer {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }

  .project-actions {
    width: 100%;
    justify-content: flex-end;
  }
}
</style> 